// HOC
export const partiallyApply = (Component, partialProps) => {
    return (props) => {
        return <Component {...partialProps} {...props} ></Component>
    }
}

// base button component
export const Button = ({ size, color, text, ...props }) => {
    return (
        <button style={{
            padding: size === 'large' ? '30px' : '8px',
            fontSize: size === 'large' ? '32px' : '16px',
            backgroundColor: color,

        }} {...props} >{text}</button>
    )
}

// regurlar
const SuccessButton = (props) => {
    return <Button color={'green'} {...props} ></Button>
}


// FP
export const DangerButton = partiallyApply(Button, { color: 'red' });
// FP
export const BigSuccessButton = partiallyApply(Button, { color: 'gren', size: 'large' })

